@import '../../styles/varible.scss';

.content {
  padding: 10px;
  display: flex;
  border-bottom: 1px solid var(--border-color);
  top: 0;
  z-index: 2;
  transition: height 0.2s;
  position: absolute;
  width: 100%;
  background-color: var(--blur-color);
  backdrop-filter: saturate(180%) blur(20px);
  height: 100%;
  box-sizing: border-box;
  align-items: center;
  z-index: 3;

  .walletIcon {
    cursor: pointer;
    height: calc(40rem / var(--base-font-size));
    width: calc(40rem / var(--base-font-size));
    transition: height 0.2s, width 0.2s;
    background-color: transparent !important;
  }

  .info {
    flex: 1;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;

    .timeBar {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .last {
        font-size: 1rem;
        font-weight: 500;
        color: var(--secondary-main-text-color);
      }
    }

    .moneyBar {
      font-size: calc(10rem / var(--base-font-size));
      color: var(--main-text-color);
      display: flex;
      // justify-content: space-around;
      width: 100%;
      align-items: center;
      transition: all 0.2s;

      i {
        height: calc(10rem / var(--base-font-size));
        border-right: 1px solid var(--border-color);
        margin: 0 10px;
      }

      div {
        display: flex;
        align-items: center;
        word-wrap: break-word;
        flex-wrap: wrap;

        span {
          white-space: nowrap;
        }
      }

      svg {
        height: calc(14rem / var(--base-font-size));
        width: calc(14rem / var(--base-font-size));
        fill: var(--svg-icon-color);
      }
    }
  }

  .eye {
    height: calc(20rem / var(--base-font-size));
    width: calc(20rem / var(--base-font-size));
  }
}

.miniMode {
  .walletIcon {
    height: calc(20rem / var(--base-font-size));
    width: calc(20rem / var(--base-font-size));
  }

  .info {
    .timeBar {
      height: 0;
      overflow: hidden;

      .last {
        height: 0;
        overflow: hidden;
      }
    }

    .moneyBar {
      font-size: 1rem;
      font-weight: 600;

      i {
      }
    }
  }
}
